import React, {useEffect, useState} from "react";
import axios from "axios";
import {Button, DatePicker, Drawer, Space, Table, Transfer, TransferProps, Typography} from "antd";
import dayjs from "dayjs";
import Search from "antd/es/input/Search";

export const PersonCalendar: React.FC = () => {
    const [dataSource, setDataSource] = useState([]);
    const [targetKeys, setTargetKeys] = useState<TransferProps['targetKeys']>([]);
    const [year, setYear] = useState(dayjs(new Date().getFullYear() + ""));
    const [open, setOpen] = useState(false);
    const [openMonth, setOpenMonth] = useState(false);
    const [dataSourceDate, setDataSourceDate] = useState([])
    const [dataSourceMonth, setDataSourceMonth] = useState([])
    const [columnsDate, setColumnsDate] = useState<any[]>([])

    useEffect(() => {
        axios.get('/api/taskOrderPersonDate/searchPersonNames').then(res => {
            if (res.status === 200) {
                setDataSource(res.data.map((item: any) => {
                    return {
                        key: item.personName,
                        title: item.personName,
                    }
                }))
            }
        })
    }, []);

    return (
        <>
            <Space direction={"vertical"}>
                <DatePicker
                    onChange={(date, dateString) => {
                        console.log(date, dateString)
                        setYear(date)
                    }}
                    picker="year"
                    value={year}
                    placeholder={"请选择年"}
                />
                <Transfer
                    dataSource={dataSource}
                    titles={['可选人员', '统计人员']}
                    targetKeys={targetKeys}
                    onChange={(targetKeys) => {
                        setTargetKeys(targetKeys);
                    }}
                    render={(item: { title: string }) => item.title}
                />
                <Search
                    placeholder="可输入多个人员姓名快速指定统计人员，多个人员用逗号隔开"
                    onSearch={(value) => setTargetKeys(value.split(","))}/>
                <Typography.Text
                    type="danger">周延浩,王斌,冯莹莹,宁东,檀元,杜海涛,胡剑男,王圣楠,朱宏声,林涛,李成,宋大刚,王婉舒,徐帅城,周青瑞,王婷,顾炀华,董娜,刘家坤,尹青青,李佳昱,彭勃,姜超,张济山,丁一杰,刘泽平,胡耀文,尹润成,袁娇,于家明,郭一鸣,韩启航</Typography.Text>
                <Typography.Text
                    type="danger">吴博,王勇,刘大明,孙志德,李旭,叶景利,赵妤,周佳玲,王紫暄,盖婷婷,杨秋菊,霍思明,马铎,李莹,梁英,王艳秋,王敏,陈鹏,杨丹,李红叶,于晓峰</Typography.Text>
                <Typography.Text
                    type="danger">刘磊,洪帆,臧蔚,范梦飞,孙宇,张济山,姜超,孙波,于泓潞,朱悦祥,全弘扬</Typography.Text>
                <Space>
                    <Button type="primary" onClick={() => {
                        setDataSourceDate([])
                        axios.post('/api/taskOrderPersonDate/searchPersonCalendar', {
                            year: year.format("YYYY"),
                            personNames: targetKeys
                        }).then(res => {
                            if (res.status === 200) {

                                const columns: any[] = []

                                res.data.calendar.forEach((item: string) => {
                                    const ele = {
                                        title: dayjs(item).format('MM'),
                                    }
                                    if (!columns.some(item => item.title === ele.title)) {
                                        columns.push(ele)
                                    }
                                })

                                columns.forEach(item => {
                                    const children: any[] = []
                                    res.data.calendar.filter((e: string) => dayjs(e).format('MM') === item.title).forEach((e: string) => {
                                        children.push({
                                            title: dayjs(e).format('DD'),
                                            dataIndex: e
                                        })
                                    })
                                    item.children = children
                                })

                                setColumnsDate(columns)
                                setDataSourceDate(res.data.data)
                            }
                        })
                        setOpen(true)
                    }}>查看考勤日历</Button>
                    <Button type="primary" onClick={() => {
                        axios({
                            url: '/api/taskOrderPersonDate/downloadPersonCalendar',
                            method: 'post',
                            responseType: 'blob',
                            data: {
                                year: year.format("YYYY"),
                                personNames: targetKeys
                            }
                        }).then(res => {
                            const url = window.URL.createObjectURL(new Blob([res.data]));
                            const link = document.createElement('a');
                            link.href = url;
                            link.setAttribute('download', '2024年任务单打卡工时情况-数智BU-研发产品线(周更新).xlsx');
                            document.body.appendChild(link)
                            link.click()
                        })
                    }}>下载考勤日历</Button>
                    <Button type="primary" onClick={() => {
                        setDataSourceMonth([])
                        axios.post('/api/taskOrderPersonDate/searchPersonMonth', {
                            year: year.format("YYYY"),
                            personNames: targetKeys
                        }).then(res => {
                            if (res.status === 200) {
                                setDataSourceMonth(res.data.hour)
                            }
                        })
                        setOpenMonth(true)
                    }}>查看月工时</Button>
                </Space>
            </Space>
            <Drawer title="考勤日历" placement="right" onClose={() => setOpen(false)} open={open} width={'80%'}>
                <Table
                    dataSource={dataSourceDate}
                    scroll={{y: 'calc(100vh - 200px)'}}
                    bordered={true}
                    size={'small'}
                    pagination={{
                        pageSize: 100,
                        hideOnSinglePage: true,
                    }}>
                    <Table.Column dataIndex={'personName'} title={'姓名'} width={'80px'} fixed={'left'}/>
                    {
                        columnsDate.map(item => {
                            return <Table.ColumnGroup title={item.title}>
                                {
                                    item.children.map((e: any) => {
                                        return <Table.Column dataIndex={e.dataIndex} title={e.title} width={'40px'}
                                                             render={(text) => {
                                                                 return <div style={{
                                                                     backgroundColor: (text === '1' ? 'yellow' : 'white'),
                                                                     width: '25px',
                                                                     height: '30px'
                                                                 }}></div>
                                                             }}/>
                                    })
                                }
                            </Table.ColumnGroup>
                        })
                    }
                </Table>
            </Drawer>
            <Drawer title="月工时" placement="right" onClose={() => setOpenMonth(false)} open={openMonth} width={'80%'}>
                <Table
                    dataSource={dataSourceMonth}
                    scroll={{y: 'calc(100vh - 200px)'}}
                    bordered={true}
                    pagination={{
                        pageSize: 100,
                        hideOnSinglePage: true,
                    }}
                    columns={[
                        {title: '姓名', dataIndex: 'personName'},
                        {title: '1月', dataIndex: '01'},
                        {title: '2月', dataIndex: '02'},
                        {title: '3月', dataIndex: '03'},
                        {title: '4月', dataIndex: '04'},
                        {title: '5月', dataIndex: '05'},
                        {title: '6月', dataIndex: '06'},
                        {title: '7月', dataIndex: '07'},
                        {title: '8月', dataIndex: '08'},
                        {title: '9月', dataIndex: '09'},
                        {title: '10月', dataIndex: '10'},
                        {title: '11月', dataIndex: '11'},
                        {title: '12月', dataIndex: '12'},
                    ]}
                />
            </Drawer>
        </>
    )
}